<template>
  <div class="dashboard-container">
    <a-spin :spinning="loading" size="large" tip="正在获取看板列表...">
      <div class="kanban-main">
        <template v-if="kanbanList && kanbanList.length">
          <div class="container-left">
            <Menu :list="kanbanList" :selectedKanban="selectedKanban" />
          </div>
          <div class="container-right">
            <a-spin :delay="300" :spinning="modLoading" />
            <noMoudel v-if="selectedKanban && !selectedKanban.moduleList.length" />

            <div v-if="!modLoading && selectedKanban && selectedKanban.moduleList.length">
              <Head :title="selectedKanban.name" />
              <gridStack :moduleList="selectedKanban.moduleList" />
            </div>
          </div>
        </template>
        <noData v-if="!loading && kanbanList && !kanbanList.length" />
      </div>
    </a-spin>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, computed, watch } from 'vue';
  import gridStack from '@/components/gridStack/index.vue';
  import { FolderOpenOutlined, ApartmentOutlined } from '@ant-design/icons-vue';
  import noData from './_source/nodata.vue';
  import noMoudel from './_source/noMoudel.vue';
  import Menu from './_source/menu.vue';
  import io from '@/utils/http/index.js';
  import { useStore } from 'vuex';
  import { useRouter, useRoute } from 'vue-router';
  import Head from './_source/head.vue';

  export default defineComponent({
    components: {
      gridStack,
      FolderOpenOutlined,
      ApartmentOutlined,
      noData,
      Menu,
      noMoudel,
      Head,
    },
    setup() {
      const store = useStore();
      const router = useRouter();
      const route = useRoute();

      const state = reactive({
        loading: false,
        modLoading: false,
      });

      // 设置当前选中看板
      const setSelectKanban = (id) => {
        state.modLoading = true;
        store
          .dispatch('kanban/getKanbanDetails', id)
          .then((res) => {
            store.commit('kanban/setParams', {
              selectedKanban: res.data,
            });
            state.modLoading = false;
          })
          .catch((e) => {
            console.log(e);
          });
      };

      // 初始化加载看板列表
      const init = () => {
        if (!store.state.kanban.list.length) {
          state.loading = true;
          store.dispatch('kanban/getList').then((res) => {
            state.loading = false;
            if (res.data.length) {
              setSelectKanban(route.params.id || res.data[0]._id);
            }
          });
        } else {
          if (!store.state.kanban.selectedKanban) {
            setSelectKanban(store.state.kanban.list[0]._id);
          }
        }
      };

      init();

      watch(
        () => route.params.id,
        (v) => {
          if (v && /\/dashboard/.test(route.path)) {
            setSelectKanban(v);
          }
        }
      );

      watch(
        () => store.state.common.loginDisplay,
        (v) => {
          if (!v) {
            init();
          }
        }
      );

      return {
        ...toRefs(state),
        kanbanList: computed(() => store.state.kanban.list),
        selectedKanban: computed(() => store.state.kanban.selectedKanban),
      };
    },
  });
</script>
<style lang="scss">
  .dashboard-container {
    .kanban-main {
      min-height: calc(100vh - 54px);
    }
    .container-left {
      position: fixed;
      top: 55px;
      left: 0;
      bottom: 0;
      width: 216px;
      background: #fff;
    }
    .container-right {
      padding-left: 221px;
      .ant-spin-spinning {
        position: absolute;
        left: 50%;
        top: 50%;
      }
    }
  }
</style>
